﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>User Registration</title></title>
    <style type="text/css">
       @import "media/css/user_form.css";
       @import "media/css/validate.css";
       @import "media/css/validationEngine.jquery.css";
       @import "media/css/jquery-ui-1.8.20.custom.css";
    </style>
    <script type="text/javascript" src="media/js/jquery.js"></script>
    <script type="text/javascript" src="media/js/formToWizard.js"></script>
    <script type="text/javascript" src="media/js/jquery.validationEngine.js"></script>
    <script type="text/javascript" src="media/js/jquery.validationEngine-en.js"></script>
    <script type="text/javascript" src="media/js/jquery-ui-1.8.20.custom.min.js"></script>

    
    <script type="text/javascript">
        $(document).ready(function(){
            $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' });
            $("#SignupForm").validationEngine();
         });
         $(function(){

				// Datepicker
			$('#DOB').datepicker({
				inline: true,
				changeMonth: true,
				changeYear: true
			});

			//hover states on the static widgets
			$('#dialog_link, ul#icons li').hover(
				function() { $(this).addClass('ui-state-hover'); },
				function() { $(this).removeClass('ui-state-hover'); }
			);

		  });
    </script>
</head>
<body>
	<div id='divOverflown'/>
    <div id="main">
        
        <form id="SignupForm" action="http://googl.com" method="post">
        <fieldset>
            <legend>User information</legend>
            <label for="Name">Name</label>
            <input id="Name" data-validation-engine="validate[required]" class="text-input" type="text"/>
            <label for="DOB">Date of birth</label>
            <input id="DOB" type="text" class="validate[required,custom[date],past[2010-01-01]] text-input datepicker" />
            <label for="Email">Email</label>
            <input id="Email" type="text" />
            <label for="Password">Password</label>
            <input id="Password" type="password" />
            
        </fieldset>
        <fieldset>
            <legend>Company information</legend>
            <label for="CompanyName">Company Name</label>
            <input id="CompanyName" type="text" />
            <label for="Website">Website</label>
            <input id="Website" type="text" />
            <label for="CompanyEmail">CompanyEmail</label>
            <input id="CompanyEmail" type="text" />
        </fieldset>
        <fieldset>
            <legend>Billing information</legend>
            <label for="NameOnCard">Name on Card</label>
            <input id="NameOnCard" type="text" />
            <label for="CardNumber">Card Number</label>
            <input id="CardNumber" type="text" />
            <label for="CreditcardMonth">Expiration</label>
            <select id="CreditcardMonth">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <select id="CreditcardYear">
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
            </select>        
            <label for="Address1">Address 1</label>
            <input id="Address1" type="text" />
            <label for="Address2">Address 2</label>
            <input id="Address2" type="text" />
            <label for="City">City</label>
            <input id="City" type="text" data-validation-engine="validate[required]"/>
            <label for="City">City</label>
            <select id="Country">
			    <option value="CA">Canada</option>
                <option value="US">United States of America</option>
            </select>
        </fieldset>
        <p>
            <input id="SaveAccount" type="submit" value="Submit form" />
        </p>
        </form>
    </div>
</body>
</html>
